
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl, language} from './intl';
import {Card, Table, Row, Col, Button} from 'antd';
import {DATETIME_FORMAT} from '../constants';
import {formatDateTime, conventEnumValueToString, formatAmount, formatPercent} from '../utils';
import {currency, repairType} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import styles from './style.css';
import Ellipsis from 'ant-design-pro/lib/Ellipsis';
import {getSourceOrderDetail} from './api';

class Detail extends React.PureComponent {
    state = {
        isFetching: false,
        isRepeat: false,
        selectedRowKeys: [],
    }
    onClickRepeatBtn = () => {
        const {details = []} = this.props.detail;
        this.setState({
            isRepeat: true,
            details: details.filter(v => v.isRepeat === true),
        });
    }
    onClickReductionBtn = () => {
        this.setState({
            isRepeat: false
        });
    }
    render() {
        const languageIntl = language;
        const {details = [], tabName} = this.props.detail;
        const newdetails = this.state.isRepeat ? this.state.details : details;
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.brand',
                    defaultMessage: '品牌'
                }),
                sorter: true,
                dataIndex: 'brand',
                width: 150,
                render: (text, record) => `(${record.brandCode})${record.brandName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.dealerCode',
                    defaultMessage: '总代号'
                }),
                dataIndex: 'dealerCode',
                width: 100,
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.code',
                    defaultMessage: '单据编号'
                }),
                dataIndex: 'code',
                width: 200,
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.submitTime',
                    defaultMessage: '申请时间'
                }),
                dataIndex: 'submitTime',
                width: 170,
                render: text => formatDateTime(text, DATETIME_FORMAT)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.vin',
                    defaultMessage: 'VIN'
                }),
                dataIndex: 'vin',
                width: 170,
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.productCategoryCode',
                    defaultMessage: '车型'
                }),
                dataIndex: 'productCategoryCode',
                width: 150,
                render: text => <span title={text}><Ellipsis length={20}>{text}</Ellipsis></span>
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.partCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'partCode',
                width: languageIntl === 'pt-PT' ? 260 : 195,
                render: text => <span title={text}><Ellipsis length={20}>{text}</Ellipsis></span>
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.partName',
                    defaultMessage: '备件名称'
                }),
                dataIndex: 'partName',
                width: 280,
                render: text => <span title={text}><Ellipsis length={28}>{text}</Ellipsis></span>
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.isCaused',
                    defaultMessage: '是否主损件'
                }),
                dataIndex: 'isCaused',
                width: 280,
                render: text => text ? 'Y' : 'N'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.quantity',
                    defaultMessage: '备件数量'
                }),
                dataIndex: 'quantity',
                className: styles.textAlign,
                width: 150,
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetailForAdd.column.currency',
                    defaultMessage: ' 币种'
                }),
                dataIndex: 'currency',
                width: 120,
                render: text => conventEnumValueToString(currency, text)
            }
        ];
        if(tabName === 'claims')
            columns.splice(2, 0,
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.column.repairType',
                        defaultMessage: ' 索赔类型'
                    }),
                    dataIndex: 'repairType',
                    width: languageIntl === 'pt-PT' ? 150 : 120,
                    render: text => conventEnumValueToString(repairType, text)
                });
        if(!this.props.isMoneyVisible)
            columns.splice(10, 0,
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.column.price',
                        defaultMessage: '单价'
                    }),
                    dataIndex: 'price',
                    className: styles.textAlign,
                    width: 150,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.column.materialFee',
                        defaultMessage: '材料费'
                    }),
                    dataIndex: 'materialFee',
                    className: styles.textAlign,
                    width: 150,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.column.mgmtFee',
                        defaultMessage: '管理费'
                    }),
                    dataIndex: 'mgmtFee',
                    className: styles.textAlign,
                    width: 150,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.column.laborFee',
                        defaultMessage: '工时费'
                    }),
                    dataIndex: 'laborFee',
                    className: styles.textAlign,
                    width: languageIntl === 'pt-PT' ? 190 : 120,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.column.accessoryFee',
                        defaultMessage: '辅料费'
                    }),
                    dataIndex: 'accessoryFee',
                    className: styles.textAlign,
                    width: languageIntl === 'pt-PT' ? 180 : 120,
                    render: text => formatAmount(text)
                },
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.column.totalFee',
                        defaultMessage: '费用合计'
                    }),
                    dataIndex: 'totalFee',
                    sorter: true,
                    width: 130,
                    className: styles.textAlign,
                    render: text => formatAmount(text)
                });
        if(this.props.isDealerUser && !this.props.isMoneyVisible) {
            columns.splice(12, 0,
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.column.mgmtFeeRate',
                        defaultMessage: '管理费率'
                    }),
                    dataIndex: 'mgmtFeeRate',
                    className: styles.textAlign,
                    width: 150,
                    render: text => formatPercent(text)
                });
            columns.splice(14, 0,
                {
                    title: this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.column.laborPrice',
                        defaultMessage: '工时单价'
                    }),
                    dataIndex: 'laborPrice',
                    className: styles.textAlign,
                    width: languageIntl === 'pt-PT' ? 190 : 120,
                    render: text => formatAmount(text)
                });
        }
            
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: selectedRowKeys => {
                this.setState({
                    selectedRowKeys
                });
            }
        };
        return (
            <div className={styles.detail}>
                <Card>
                    <DescriptionList size="large" title={this.props.intl.formatMessage({
                        id: 'commonDetailForAdd.order.title',
                        defaultMessage: '单据信息'
                    })}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.brand',
                                defaultMessage: '品牌'
                            })}>
                            {`(${this.props.detail.brandCode})${this.props.detail.brandName}`}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.dealerCode',
                                defaultMessage: '服务站编号'
                            })}>
                            {this.props.detail.dealerCode}
                        </Description>
                        {!this.props.isMoneyVisible &&
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.materialFee',
                                defaultMessage: '材料费'
                            })}>
                            {formatAmount(this.props.detail.materialFee)}
                        </Description>}
                        {!this.props.isMoneyVisible &&
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.mgmtFee',
                                defaultMessage: '配件管理费'
                            })}>
                            {formatAmount(this.props.detail.mgmtFee)}
                        </Description>}
                        {!this.props.isMoneyVisible &&
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.laborFee',
                                defaultMessage: '工时费'
                            })}>
                            {formatAmount(this.props.detail.laborFee)}
                        </Description>}
                        {!this.props.isMoneyVisible &&
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.assistantFee',
                                defaultMessage: '辅料费'
                            })}>
                            {formatAmount(this.props.detail.assistantFee)}
                        </Description>}
                        {/* <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.outFee',
                                defaultMessage: '外出费用'
                            })}>
                            {formatAmount(this.props.detail.outFee)}
                        </Description> */}
                        {!this.props.isMoneyVisible &&
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.totalFee',
                                defaultMessage: '费用合计'
                            })}>
                            {formatAmount(this.props.detail.totalFee)}
                        </Description>}
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.submitTime',
                                defaultMessage: '申请日期'
                            })}>
                            {formatDateTime(this.props.detail.submitTime, DATETIME_FORMAT)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.currency',
                                defaultMessage: '币种'
                            })}>
                            {conventEnumValueToString(currency, this.props.detail.currency)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.tradeMethodName',
                                defaultMessage: '贸易方式'
                            })}>
                            {this.props.detail.tradeMethodName}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetailForAdd.info.manufacturerName',
                                defaultMessage: '生产工厂'
                            })}>
                            {this.props.detail.manufacturerName}
                        </Description>
                    </DescriptionList>
                    <DescriptionList col={1} size="large" className={styles.mgtp}>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetailForAdd.info.remark',
                            defaultMessage: '备注'
                        })}>
                            {this.props.detail.remark}
                        </Description>
                    </DescriptionList>
                </Card>
                <Card
                    title={<div><Row>
                        <Col>
                            {this.props.intl.formatMessage({
                                id: 'detail.details.title',
                                defaultMessage: '清单列表'
                            })}
                            {this.state.isRepeat ? <Button
                                className={styles.selectRepeatBtn}
                                size="small"
                                onClick={this.onClickReductionBtn}>
                                {this.props.intl.formatMessage({
                                    id: 'detail.operation.reduction',
                                    defaultMessage: '还原'
                                })}
                            </Button> : <Button
                                className={styles.selectRepeatBtn}
                                size="small"
                                onClick={this.onClickRepeatBtn}>
                                {this.props.intl.formatMessage({
                                    id: 'detail.operation.repeat',
                                    defaultMessage: '查重'
                                })}
                            </Button>}
                        </Col>
                    </Row></div>} >
                    <Table
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={columns}
                        pagination={false}
                        dataSource={newdetails}
                        rowSelection={rowSelection}
                        scroll={{
                            x: 'max-content',
                            y: 430}}
                        size="small"
                        bordered={true} />
                </Card>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
    showBrand: false,
    isMoneyVisible: false,
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
    isMoneyVisible: PropTypes.bool,
    operations: PropTypes.any,
    showBrand: PropTypes.bool,
    tabName: PropTypes.string,
};
export default injectIntl(Detail);
